<template>
  <div>
    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-info">
          <div class="prod_title islink" @click="toDetail">
            <p>
              {{ prodInfo.prodName
              }}<span class="code">（{{ prodCode }}）</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-title">
          <p>定投金额</p>
          <p class="title-right" @click="toTransRate">交易费率</p>
        </div>
        <div class="panel_wrap-info">
          <!-- 最低定投金额 -->
          <v-input
            v-model="enBalance"
            :placeholder="`最低定投` + prodInfo.minTimerBalance + `元`"
          >
            <span slot="icon" class="icon"></span>
          </v-input>
          <div class="product_tags money">
            <span
              class="product_tag"
              v-for="money in moneyTags"
              @click="selectTag(money)"
              :key="money"
              >{{ money }}元</span
            >
          </div>
        </div>
      </div>
    </div>

    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-info">
          <div class="cell-box flex v-1px-b">
            <p>定投账户</p>
            <p>
              {{ userInfo.fundAccount | numHidden }}（{{
                userInfo.userName | numHidden(1, 2)
              }}）
            </p>
          </div>
          <div class="cell-box flex">
            <div>
              可用：
              <span>{{ enableBalance | numberComma }}元</span>
              <a class="btn-refresh" href="javascript:;" @click="refresh"
                >刷新</a
              >
              <!-- <div class="refresh-box">
                <van-loading size="15" color="#1f6aff" v-show="refreshing"/>
              </div> -->
            </div>
            <p>
              <a class="btn-invest" href="javascript:;" @click="invest">充值</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-info">
          <div class="invest-cell flex islink" @click="showPicker = true">
            <p>定投周期</p>
            <div class="tr">
              <p>{{ showDate }}</p>
              <p class="note">
                下个转入日{{
                  nextPayDay | formatDate("MM月DD")
                }}日，遇非交易日顺延
              </p>
            </div>
          </div>

          <div class="radio-box" v-if="contractData.length > 0">
            <div
              class="radio"
              @click="toSignPdf(item, index)"
              v-for="(item, index) in contractData"
              :key="index"
            >
              <input
                type="radio"
                v-model="ctCheckedList[index]"
                :id="'ctChecked' + index"
                value="true"
              />
              <label :for="'ctChecked' + index"
                >我已阅读并同意签署《{{ item.templateName }}》</label
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 增加智慧止盈 -->
    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-info">
          <div class="cell-box flex islink">
            <p>基智投-智慧止盈</p>
            <p>策略详情</p>
          </div>
          <div class="tab-wrap">
            <div class="tab-lbtn left-actived">目标止盈</div>
            <div class="tab-rbtn right-gray">移动止盈</div>
          </div>
          <div class="tab-page">
            <p class="discrib">
              设定目标收益率，达到目标收益率后自动赎回完成止盈，锁定收益
            </p>
            <div class="item-row islink">
              <div class="row-left">定投目标收益理率</div>
              <div class="row-right rate">10%</div>
            </div>
            <div class="item-row islink">
              <div class="row-left">止盈锁定期</div>
              <div class="row-right">必选</div>
            </div>
            <div class="item-row islink">
              <div class="row-left">止盈后是否自动开启下轮定投</div>
              <div class="row-right">必选</div>
            </div>
            <div class="slecet-section">
              <div class="slecet-discrib">
                <p>
                  <span>热门选项：</span> 目标收益率30%，止盈锁定期<span
                    >3个月，</span
                  >
                  完成止盈后自动开始下一轮目标止盈定投。
                </p>
              </div>
              <div class="select-btn">选择</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-info">
          <div class="buy-wrap">
            <div class="buy-discrib">
              <div class="main-title">基智投-智慧买入<span>热门</span></div>
              <div class="sub-title">高位少投，低位多投</div>
            </div>
            <div class="buy-switch">
              <van-switch
                size="30px"
                v-model="buyChecked"
                active-color="#1F6AFF"
                inactive-color="#E5E5E5"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <a
        class="btn-buy"
        href="javascript:;"
        @click="doAddInvest"
        v-if="canPay && !allotno"
        >确认定投</a
      >
      <a class="btn-buy" href="javascript:;" disabled v-if="!canPay && !allotno"
        >确认定投</a
      >
      <a
        class="btn-buy"
        href="javascript:;"
        @click="doUpdateInvest"
        v-if="canPay && allotno"
        >修改定投</a
      >
      <a class="btn-buy" href="javascript:;" disabled v-if="!canPay && allotno"
        >修改定投</a
      >
    </div>

    <van-popup v-model="showPicker" @open="showPopup" position="bottom">
      <van-picker
        ref="picker"
        show-toolbar
        title="定投周期"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="confirm"
      ></van-picker>
    </van-popup>
  </div>
</template>

<script>
import { Divider, Popup, Picker, Loading, Switch } from "vant";
import { mapState } from "vuex";
import VInput from "@/components/common/vInput";
import {
  getFundDetailByCode,
  queryOnInvest,
  getFundInfo,
  nextPayDay,
  getContractById,
  getFundAccount,
  openFundAccount,
  fundAddPlan,
  fundUpdatePlan,
} from "@/api/index";
import preCheck from "@/components/inadequacy/preCheck.js";
import inadequacy from "@/components/inadequacy/inadequacy.js";
import specialFocus from "@/components/inadequacy/specialFocus.js";
import dayjs from "dayjs";

let DZUtils;
let Common;
export default {
  mixins: [preCheck, inadequacy, specialFocus],
  components: {
    [Divider.name]: Divider,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Loading.name]: Loading,
    VInput,
    [Switch.name]: Switch,
  },
  data() {
    return {
      buyChecked: "",
      allotno: "", // 修改定投计划
      prodCode: "",
      prodInfo: {},
      enableBalance: "", // 用户可用金额
      enBalance: "", // 定投金额，默认1000元
      moneyTags: [2000, 5000, 10000],
      showPicker: false,
      showDate: "每周 周一",
      payValue: ["w", 1],
      nextPayDay: "",
      columns: [],
      weekArr: ["周一", "周二", "周三", "周四", "周五"],
      monthArr: [
        "1日",
        "2日",
        "3日",
        "4日",
        "5日",
        "6日",
        "7日",
        "8日",
        "9日",
        "10日",
        "11日",
        "12日",
        "13日",
        "14日",
        "15日",
        "16日",
        "17日",
        "18日",
        "19日",
        "20日",
        "21日",
        "22日",
        "23日",
        "24日",
        "25日",
        "26日",
        "27日",
        "28日",
        "29日",
        "30日",
      ],
      contractData: [],
      hasRead: false,
      payInfo: {}, // 跳转签署协议时，记录已经填写的信息
      canPay: false,
    };
  },
  watch: {
    enBalance() {
      if (this.enBalance && this.enBalance > 0) {
        this.canPay = true;
      } else {
        this.canPay = false;
      }
    },
  },
  computed: mapState({
    // refreshing: state => state.refreshing,
    userInfo: (state) => state.userInfo,
  }),
  beforeMount() {
    DZUtils = require("@/utils/DZUtils").default;
    Common = require("@/utils/common").default;
  },
  mounted() {
    this.allotno = this.$route.query.allotno;
    this.prodCode = this.$route.query.prodCode;
    const payInfo = DZUtils.getStorage("payInfo") || "";
    this.ctCheckedList = DZUtils.getStorage("ctCheckedList");
    this.enBalance = payInfo.enBalance || "";
    this.payValue = payInfo.payValue || ["w", 1]; // 默认值

    this.loadData();
    this.getNextPayDay();
    this.refresh("get");
  },
  methods: {
    async loadData() {
      const res = await getFundDetailByCode(this.prodCode);
      if (res.returnCode === "0") {
        [this.prodInfo] = res.dataSet;
      }
      // 修改定投计划
      if (this.allotno) {
        // 初始化数据
        const params = {
          allotno: this.allotno,
        };
        const res3 = await queryOnInvest(params);
        if (res3.returnCode === "0" && res3.dataSet[0]) {
          const [data] = res3.dataSet;
          const payUnit = { 1: "w", 0: "m", 2: "d" };
          const unit1 = payUnit[data.pay_cycle_unit];
          const unit2 = parseInt(data.en_fund_date, 10);

          this.payValue = [unit1, unit2];
          this.enBalance = data.balance;
        } else {
          DZUtils.iAlert("错误提示", res3.returnInfo);
        }
      }
      // 计算定投周期picker
      this.calcPickerColumns();
      this.calcShowDate();
      this.getNextPayDay();

      // 获取产品协议
      const res2 = await getContractById({
        type: "prodPayCt",
        code: this.prodCode,
      });
      if (res2.returnCode === "0") {
        // 获取到协议书数据
        this.contractData = res2.dataSet;
        this.ctCheckedList =
          this.ctCheckedList || new Array(res2.dataSet.length);
        DZUtils.setStorage("ctCheckedList", this.ctCheckedList);
      } else {
        DZUtils.iDialog(res2.returnInfo);
      }
    },
    calcPickerColumns() {
      const payUnit = { w: "每周", m: "每月", d: "每日" };
      Object.keys(payUnit).forEach((key) => {
        const payList = {
          text: payUnit[key],
          value: key,
          children: [],
        };
        let arr = [""];
        if (key === "w") {
          arr = this.weekArr;
        }
        if (key === "m") {
          arr = this.monthArr;
        }
        for (let i = 0; i < arr.length; i += 1) {
          payList.children.push({
            text: arr[i],
            value: i + 1,
          });
        }
        this.columns.push(payList);
      });
    },
    selectTag(money) {
      this.enBalance = money;
    },
    async refresh(type) {
      const res = await getFundInfo({ cookie: "" });
      if (res.returnCode === "0") {
        this.enableBalance = res.dataSet[0].enable_balance;
        if (type != "get") {
          DZUtils.iToast("刷新成功");
        }
      }
    },
    showPopup() {
      const payUnit = { w: 0, m: 1, d: 2 };
      this.$nextTick(() => {
        this.$refs.picker.setColumnIndex(0, payUnit[this.payValue[0]]);
        this.$refs.picker.setColumnIndex(1, this.payValue[1] - 1);
      });
    },
    confirm() {
      this.$set(this.payValue, 0, this.$refs.picker.getColumnValue(0).value);
      this.$set(this.payValue, 1, this.$refs.picker.getColumnValue(1).value);
      this.calcShowDate();
      this.getNextPayDay();
      this.showPicker = false;
    },
    async getNextPayDay() {
      const payUnit = { w: "1", m: "0", d: "2" };
      const params = {
        enFundDate: this.payValue[1],
        payUnit: payUnit[this.payValue[0]],
      };
      const res = await nextPayDay(params);
      if (res.returnCode === "0") {
        this.nextPayDay = res.returnInfo;
      }
    },
    calcShowDate() {
      if (this.payValue[0] === "w") {
        this.showDate = `每周 ${this.weekArr[this.payValue[1] - 1]}`;
      }
      if (this.payValue[0] === "m") {
        this.showDate = `每月 ${this.monthArr[this.payValue[1] - 1]}`;
      }
      if (this.payValue[0] === "d") {
        this.showDate = `每日`;
      }
    },
    async doUpdateInvest() {
      this.canPay = false;
      const payUnit = { w: "1", m: "0", d: "2" };
      const params = {
        productCode: this.prodCode,
        allotno: this.allotno,
        startDate: dayjs().format("YYYYMMDD"),
        endDate: "9999",
        balance: this.enBalance,
        enFundDate: this.payValue[1],
        payUnit: payUnit[this.payValue[0]],
      };
      const res = await fundUpdatePlan(params);
      if (res.dataSet.length > 0 && res.dataSet[0].serial_no !== "") {
        // 修改成功
        DZUtils.iToast("修改定投成功！");
        this.$router.replace({
          path: `${this.global.publicPath}/userCenter/investIndex`,
        });
      } else {
        DZUtils.iAlert("错误提示", res.returnInfo);
      }
    },
    doAddInvest() {
      for (let i = 0; i < this.contractData.length; i++) {
        if (!this.ctCheckedList[i]) {
          DZUtils.iAlert(
            "提示",
            `购买前请先阅读并签署《${this.contractData[i].templateName}》！`
          );
          return false;
        }
      }
      this.canPay = false;
      // 前置检查--风险等级
      this.preCheckParam = {
        fromPage: `${this.global.publicPath}/fund/autoInvest`,
        fromParam: { prodCode: this.prodCode },
      };
      this.preCheck("12");
    },
    preCheckCallback(type) {
      // 保守型客户，禁止购买低风险之外的产品
      const highProdrisk =
        parseInt(this.userInfo.userRiskLevel, 10) <
        parseInt(this.prodInfo.prodriskLevel, 10);
      if (this.userInfo.userRiskLevel == "1" && highProdrisk) {
        DZUtils.iAlert(
          "温馨提示",
          `<p>尊敬的投资者（姓名：${this.userInfo.userName}， 资金账号：${this.userInfo.fundAccount}）</p>
        <p>您是我司保守型投资者，该款金融产品超出您的风险承受范围，不适合您投资！</p>`,
          "确认"
        );
      } else {
        // 第三步：不适当性判断
        this.inadequacyCheck();
      }
    },
    async inadequacyCallback() {
      // 第四步：特别关注校验
      this.specialFocusCheck();
    },
    specialFocusCallback() {
      // 高风险提示
      this.highRiskWarn();
    },
    highRiskWarn() {
      if (parseInt(this.prodInfo.prodriskLevel, 10) >= 5) {
        const confirmFun = () => {
          // 谨慎型、稳健型、积极型客户主动购买高风险产品
          const highRiskHTML1 = `<p>尊敬的${this.userInfo.userName}：</p>
            <span>您是我司<span class="proName">${Common.parseUserRisk(
              this.userInfo.userRiskLevel
            )}</span>客户，该款金融产品为高风险产品，超出您的风险承受范围，投资该产品可能导致出现您无法承受的损失，建议您应当审慎考察该产品的特征及风险，自行做出充分的风险评估。</span>`;
          const highRiskHTML2 = `<p>尊敬的${this.userInfo.userName}：</p>
            <span>您是我司<span class="proName">${Common.parseUserRisk(
              this.userInfo.userRiskLevel
            )}</span>客户，该款金融产品为高风险产品，建议您应当审慎考察该产品的特征及风险，自行做出充分的风险评估。</span>`;
          if (
            parseInt(this.userInfo.userRiskLevel, 10) >= 2 &&
            parseInt(this.userInfo.userRiskLevel, 10) <= 4
          ) {
            // 谨慎型、稳健型、积极型客户主动购买高风险产品
            DZUtils.iConfirm(
              "高风险提示",
              highRiskHTML1,
              "已知悉,继续购买",
              "放弃购买",
              () => {
                this.addFundPlan();
              }
            );
          } else if (parseInt(this.userInfo.userRiskLevel, 10) === 5) {
            // 激进型客户主动购买高风险产品
            DZUtils.iConfirm(
              "高风险提示",
              highRiskHTML2,
              "已知悉,继续购买",
              "放弃购买",
              () => {
                this.addFundPlan();
              }
            );
          }
        };
        const cancelFun = () => {
          const highRiskHTML3 = `<p>尊敬的${this.userInfo.userName}：</p>
            <span>您拟投资的金融产品为高风险产品，且您从未有购买高风险产品的投资经验，该款金融产品可能超出您的风险承受范围，不合适您投资。建议您审慎考察本产品的特征及风险，自行做出充分的风险评估，确定是否继续投资该项产品，并愿意承担该项投资可能引起的所有损失和其他后果。</span>`;
          DZUtils.iConfirm(
            "高风险提示",
            highRiskHTML3,
            "已知悉,继续购买",
            "放弃购买",
            () => {
              this.addFundPlan();
            }
          );
        };
        DZUtils.iConfirm(
          "消息提示",
          `<p>尊敬的${this.userInfo.userName}：</p><span>您有购买高风险产品的经验吗？</span`,
          "有",
          "否",
          confirmFun,
          cancelFun
        );
      } else {
        this.addFundPlan();
      }
    },
    async addFundPlan() {
      this.openAccount(async () => {
        const payUnit = { w: "1", m: "0", d: "2" };
        const params = {
          productCode: this.prodCode,
          startDate: dayjs().format("YYYYMMDD"),
          endDate: "9999",
          balance: this.enBalance,
          enFundDate: this.payValue[1],
          payUnit: payUnit[this.payValue[0]],
        };
        const res = await fundAddPlan(params);
        if (res.dataSet[0] && res.dataSet[0].serial_no !== "") {
          // 新增定投成功
          DZUtils.removeStorage("payInfo");
          DZUtils.removeStorage("transFund");
          DZUtils.removeStorage("ctCheckedList");

          this.$router.replace({
            path: `${this.global.publicPath}/userCenter/investIndex`,
          });
        } else {
          DZUtils.iAlert("错误提示", res.returnInfo);
        }
      });
    },
    async openAccount(callback) {
      // 先判断并开通基金账户
      const res = await getFundAccount(this.prodInfo.prodtaNo);
      if (res.returnCode === "0") {
        if (res.dataSet.length === 0) {
          const res2 = await openFundAccount(this.prodInfo.prodtaNo);
          if (res2.returnCode === "0") {
            // 开通基金账户成功
            callback && callback();
          } else {
            DZUtils.iAlert(null, res2.returnInfo);
          }
        } else {
          // 已开通基金账户
          callback && callback();
        }
      } else {
        DZUtils.iAlert(null, res.returnInfo);
      }
    },
    toTransRate() {
      const payInfo = {
        enBalance: this.enBalance,
        payValue: this.payValue,
      };
      DZUtils.setStorage("payInfo", payInfo);

      this.$router.push({
        path: `${this.global.publicPath}/fund/transactionRate`,
        query: { prodCode: this.prodCode },
      });
    },
    async invest() {
      // 跳转银证转账
      this.toYZZZ({
        fromPage: `${this.global.publicPath}/fund/autoInvest`,
        fromParam: { prodCode: this.prodCode },
      });
    },
    toDetail() {
      this.$router.push({
        path: `${this.global.publicPath}/fund/detail`,
        query: { prodCode: this.prodCode },
      });
    },
    toSignPdf(item, index) {
      const payInfo = {
        enBalance: this.enBalance,
        payValue: this.payValue,
      };
      DZUtils.setStorage("payInfo", payInfo);

      this.$router.push({
        path: `${this.global.publicPath}/signPdf`,
        query: {
          url: window.btoa(item.templateUrl),
          id: item.id,
          index,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.panel_wrap {
  .panel_wrap-inner {
    .panel_wrap-title {
      font-size: 15px;
      font-weight: bold;
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      .title-right {
        font-size: 13px;
        font-weight: normal;
        color: #1f6aff;
      }
    }
    .panel_wrap-info {
      font-size: 15px;
      color: #333;
      .invest-cell {
        align-items: center;
        line-height: 22px;
        padding: 11px 22px 11px 0;
        .note {
          font-size: 13px;
          color: #666;
        }
      }
      .product_tags {
        padding-bottom: 20px;
      }
      .prod_title,
      .cell-box {
        line-height: 44px;
        .code {
          font-size: 13px;
          color: #999999;
        }
      }
      .btn-refresh {
        font-size: 13px;
        margin-left: 10px;
      }
      .btn-invest {
        font-size: 13px;
        padding: 0 10px;
        line-height: 24px;
        display: inline-block;
        .rem1px(@-color-primary, 24px, 1px);
      }
    }
  }
}
.radio-box {
  padding: 20px 0;
  .radio {
    padding: 4px 0;
    input[type="radio"] {
      display: none;
    }
    input[type="radio"] + label {
      position: relative;
      text-align: left;
      vertical-align: middle;
      display: inline-block;
      padding-left: 18px;
      font-size: 14px;
      &::before {
        content: "";
        display: inline-block;
        width: 12px; /*no*/
        height: 12px; /*no*/
        border: 1px solid #666; /*no*/
        border-radius: 50%;
        position: absolute;
        top: 3px; /*no*/
        left: 0; /*no*/
      }
    }
    input[type="radio"]:checked + label {
      &::before {
        border-color: @-color-primary;
      }
      &::after {
        content: "";
        display: inline-block;
        width: 3px; /*no*/
        height: 6px; /*no*/
        border-width: 0 1px 1px 0; /*no*/
        border-style: solid;
        border-color: @-color-primary;
        position: absolute;
        top: 6px; /*no*/
        left: 5px; /*no*/
        transform: rotate(45deg);
      }
    }
  }
}
.footer {
  text-align: center;
  padding: 31px 0 25px;
  .btn-buy {
    width: 345px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    color: #fff;
    display: inline-block;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #3861fe 0%, #489bfe 100%);
    border-radius: 22px;
    &[disabled="disabled"] {
      background-image: linear-gradient(90deg, #d8e0ff 0%, #dbebff 100%);
    }
  }
}
.invest-warning {
  font-size: 13px;
  color: #999;
  padding: 0 15px;
  .dot {
    padding-left: 15px;
    position: relative;
    &::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #999;
      position: absolute;
      top: 6px;
      left: 0;
    }
  }
}
// 增加基智投
.left-actived {
  z-index: 1;
  background-image: url(../../assets/images/invest/letft_select_bg@2x.png);
}
.left-gray {
  background-image: url(../../assets/images/invest/left_unselect_bg@2x.png);
}
.right-actived {
  z-index: 1;
  background-image: url(../../assets/images/invest/right_select_bg@2x.png);
}
.right-gray {
  background-image: url(../../assets/images/invest/right_unselect_bg@2x.png);
}
.tab-wrap {
  position: relative;
  height: 42px;
  .tab-lbtn {
    position: absolute;
    width: 184px;
    height: 42px;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 42px;
  }
  .tab-rbtn {
    position: absolute;
    width: 184px;
    height: 42px;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 42px;
  }
}
.tab-page {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
  padding: 15px;
  .discrib {
    position: relative;
    font-size: 13px;
    color: #999999;
    line-height: 1.5;
    padding-left: 16px;
    &::before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 0;
      top: 7px;
      border-width: 3px;
      border-radius: 3px;
      border-style: solid;
      border-color: #ff852e;
    }
  }
  .item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    font-size: 15px;
    color: #333333;
    .row-right {
      color: #999999;
    }
    .rate {
      color: #333333;
    }
  }
  .slecet-section {
    background: #fff8f3;
    border-radius: 2px;
    font-size: 13px;
    color: #666666;
    padding: 10px;
    display: flex;
    align-items: center;
    .slecet-discrib {
      flex: 1;
      margin-right: 18px;
    }
    .select-btn {
      width: 48px;
      height: 24px;
      line-height: 24px;
      background: #ff852e;
      border-radius: 12px;
      color: #fff;
      text-align: center;
    }
  }
}
.buy-wrap {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .main-title {
    font-size: 15px;
    color: #333333;
    span {
      margin-left: 5px;
      display: inline-block;
      padding: 0 5px;
      height: 16px;
      line-height: 16px;
      background: #fa6b4e;
      border-radius: 4px 0 4px 0;
      font-size: 12px;
      color: #ffffff;
    }
  }
  .sub-title {
    font-size: 13px;
    color: #666666;
  }
}
</style>